<template>
  <!-- Typing 状态显示 -->
  <div v-if="isWaiting" class="message assistant">
    <div class="message-avatar">
      <AiAvatarIcon class="ai-avatar-icon" />
    </div>
    <div class="message-content">
      <div class="message-bubble typing">
        <TypingDotsIcon />
      </div>
    </div>
  </div>

  <!-- 普通消息显示 -->
  <div v-else :class="['message', message?.role]">
    <div class="message-avatar">
      <AiAvatarIcon v-if="message?.role === 'assistant'" class="ai-avatar-icon" />
      <div v-else class="user-avatar">
        {{ userStore.userInfo.nickname?.charAt(0).toUpperCase() || 'U' }}
      </div>
    </div>
    <div class="message-content">
      <!-- 附件渲染 -->
      <div
        v-if="message?.attachments && message.attachments.length > 0"
        class="message-attachments"
      >
        <MessageAttachment
          v-for="attachment in message.attachments"
          :key="attachment.id"
          :attachment="attachment"
        />
      </div>

      <!-- 消息内容 -->
      <div v-if="message?.content" class="message-bubble">
        <MdPreview
          v-if="message.role === 'assistant'"
          class="message-markdown"
          :id="`message-preview-${message.id ?? message.timestamp}`"
          :modelValue="message.content"
        />
        <div v-else class="message-text">{{ message.content }}</div>
      </div>

      <a-flex align="center" gap="8" class="message-time-container">
        <span v-if="message?.timestamp" class="message-time">{{
          formatTime(message.timestamp)
        }}</span>
        <template
          v-if="
            message?.role === 'assistant' &&
            !isTyping &&
            message?.timestamp === chatStore.latestMessage?.timestamp
          "
        >
          <a-button
            class="message-action-btn"
            type="link"
            title="重新生成"
            @click="emit('regenerate', message?.id ?? message?.timestamp)"
            ><ReloadOutlined class="message-action-icon"
          /></a-button>
        </template>
      </a-flex>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AiAvatarIcon, TypingDotsIcon } from '@/icons/chat';
import type { ChatMessage } from '@/interface/chat';
import { useChatStore } from '@/stores/chat';
import { useUserStore } from '@/stores/user';
import { ReloadOutlined } from '@ant-design/icons-vue';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import MessageAttachment from './MessageAttachment.vue';

interface Props {
  message?: ChatMessage;
  isWaiting?: boolean;
  isTyping?: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  regenerate: [messageId: number];
}>();

const chatStore = useChatStore();
const userStore = useUserStore();

const formatTime = (timestamp: number) => {
  const date = new Date(timestamp);
  const monthStr = date.toLocaleDateString('en-US', {
    month: '2-digit',
  });
  const dayStr = date.toLocaleDateString('en-US', {
    day: '2-digit',
  });
  const timeStr = date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
  });
  return `${monthStr}-${dayStr} ${timeStr}`;
};
</script>

<style lang="less" scoped>
.message {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;

  &.assistant {
    .message-bubble {
      background: #f5f5f5;
    }
  }

  &.user {
    flex-direction: row-reverse;

    /* 用户消息的附件在消息气泡样式中 */

    .message-attachment {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .message-bubble {
      background: #1890ff;
    }

    .message-time-container {
      justify-content: flex-end;
    }
  }
}

.message-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0 12px;
  border-radius: 50%;
  overflow: hidden;

  .ai-avatar-icon {
    width: 32px;
    height: 32px;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    background: #1890ff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
  }
}

.message-content {
  max-width: 70%;
}

.message-attachments {
  margin-bottom: 8px;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 12px;
  word-break: break-word;
  width: fit-content;

  &.typing {
    padding: 8px 12px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
  }
}

.message-markdown {
  padding: 0 !important;
  background: transparent;
}

.message-text {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.message-time-container {
  margin-top: 4px;
}

.message-time {
  font-size: 12px;
  line-height: 20px;
  color: #999;
}

.message-action-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  .message-action-icon {
    font-size: 14px;
  }

  &:hover {
    background: #e2e8f0;
    color: #667eea;
    transform: scale(1.05);
  }
}
</style>
